<template>
  <div>
    <!--搜索卡片-->
    <el-card class="box-card" :body-style="{ padding: '10px',height:'30px'}">
      <el-form :inline="true" :model="searchInfo" ref="ruleForm" class="demo-form-inline">
        <el-form-item label="登记编号" prop="infoId">
          <el-input size="small" v-model="searchInfo.infoId" placeholder="登记编号" style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item label="房间" prop="roomId" >
          <el-input size="small" v-model="searchInfo.roomId" placeholder="房间" style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item label="退房" prop="status">
          <el-select v-model="searchInfo.status" placeholder="房屋状态" clearable  size="medium" style="width: 180px;">
            <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" round size="small" @click="onSearch">查询</el-button>
          <el-button type="warning" round size="small" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="Button">
      <el-button size="small" type="danger" @click="deleteBatch" icon="el-icon-delete-solid" plain>批量删除</el-button>

    </div>
    <!--数据表格-->
    <el-table :data="tableData" style="width: 100%;" max-height="100%"
              @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="id" label="序号" width="60"></el-table-column>
      <el-table-column prop="infoId" label="登记编号" width="120"></el-table-column>
      <el-table-column prop="userId" label="用户" width="80"></el-table-column>
      <el-table-column prop="hotelId" label="房东" width="80"></el-table-column>
      <el-table-column prop="roomTypeId" label="房屋类型" width="120">
        <template slot-scope="scope">
          {{ getRoomTypeName(scope.row.roomTypeId) }}
        </template>
      </el-table-column>
      <el-table-column prop="roomId" label="房间" width="80"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === 'Y' ? 'danger' : 'primary'"
            disable-transitions>{{ scope.row.status == "Y" ? '退房' : '占用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="occupancyTime" label="入住时间" width="180"></el-table-column>
      <el-table-column prop="leaveTime" label="离开时间" width="180"></el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            :disabled="isLeaveTimeNotEmpty(scope.row)"
            @click="handleEdit(scope.$index, scope.row)">退房
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--分页查询-->
    <el-card class="box-card" :body-style="{ padding: '10px',height:'20px'}">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchInfo.pageNum"
        :page-sizes="[7, 12, 17, 22]"
        :page-size="searchInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>

    </el-card>

  </div>
</template>

<script>
import {delOccupancyInfoBatch, delOccupancyInfoById, findAll, updateLeaveTime} from "@/api/occupancyInfo/info";
import {findRoomType} from "@/api/room/room";

export default {
  name: "OccupancyInfo",
  data() {
    return {
      tableData: [],
      searchInfo: {
        pageNum: 1,
        pageSize: 7,
        infoId: null,
        roomId: null,
        status: null,
      },
      updateInfo:{
        id: null,
      },
      leaveStatus: true,

      total: 0,

      multipleSelection:[],
      options:[],
      statusOptions: [{
        "label": "退房",
        "value": "Y"
      }, {
        "label": "占用",
        "value": "N"
      }],
    }
  },
  methods: {
    // 查询全部数据
    findAll() {
      console.log(this.searchInfo)
      findAll(this.searchInfo).then(res => {
        console.log('查询全部: ', res)
        // console.log(this.$store.getters.id)
        if (res.code === 20000) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      }).catch(error => {
        console.log('请求查询全部报错: ', error)
      })
    },

    // 查询房屋类型
    findRoomType() {
      findRoomType().then(ret => {
        console.log(ret)
        if (ret.code === 20000) {
          console.log('主单位数据: ', ret.data)
          this.options = ret.data.map(item => ({
            value: item.typeId, // 使用 measureId 作为 value
            label: item.typeName // 使用 measureName 作为 label
          }));
          console.log(this.options);

        }
      }).catch(error => {
        console.log('请求查询全部报错: ', error)
      })
    },

    handleEdit(index, row){
      updateLeaveTime(row.id).then(ret => {
        if (ret.code === 20000) {
          this.$message({
            type: 'success',
            message: '退房成功！',
            duration: 1000,
          });
          this.findAll();
        }
      }).catch(error => {
        console.log('请求退房报错: ', error)
      })
    },

    // 删除
    handleDelete(index, row) {
      console.log(row)
      this.$confirm('是否删除序号为"' + row.id + '" 的登记信息?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delOccupancyInfoById(row.id).then(ret => {
          if (ret.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功！',
              duration: 1000,
            });
            this.findAll();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 批量删除
    deleteBatch() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择要删除的数据'
        });
      } else {
        this.$confirm('是否确认删除选中的' + this.multipleSelection + '数据?', '批量删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() =>{
          delOccupancyInfoBatch({
            ids: this.multipleSelection.join(',')
          }).then(ret => {
            if (ret.code === 20000) {
              this.$message({
                type: 'success',
                message: '删除成功！',
                duration: 1000,
              });
              this.findAll();
            }
          }).catch(error => {
            console.log('批量删除报错: ', error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },

    onSearch(){
      this.findAll()
    },

    resetForm(formName) {  // 重置
      this.$refs[formName].resetFields();
      this.findAll();
    },

    // 分页查询配置
    handleSizeChange(val) { // 处理页面大小改变时触发
      this.searchInfo.pageSize = val;
      this.findAll()
    },
    handleCurrentChange(val) {// 当前页码改变时触发
      this.searchInfo.pageNum = val;
      this.findAll()
    },

    // 批量删除存的编号数组
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (const index in val) {
        this.multipleSelection.push(val[index].id); // 取出val中的id
      }
    },

    isLeaveTimeNotEmpty(row) {
      return !!row.leaveTime; // 如果 leaveTime 不为空，返回 true，禁用按钮；否则返回 false，启用按钮
    },

    getRoomTypeName(roomTypeId) {
      const option = this.options.find(option => option.value === roomTypeId);
      return option ? option.label : '未知';
    },

  },

  created() {
    this.findAll();
    this.findRoomType();
  }
}
</script>

<style scoped lang="scss">
.box-card {
  width: 100%;
  margin-top: 1px;
  height: 55px;
}

.Button {
  margin-left: 10px;
  margin-top: 10px;
}
</style>
